<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>列表项目标记位置案例</title>
    <style type="text/css">
        ul.inside {
            list-style-position: inside
        }

        ul.outside {
            list-style-position: outside
        }
    </style>
</head>

<body>
    <p>该列表的 list-style-position 的值是 "inside"：</p>
    <ul class="inside">
        <li>Earl Grey Tea - 一种黑颜色的茶</li>
        <li>Jasmine Tea - 一种神奇的“全功能”茶</li>
        <li>Honeybush Tea - 一种令人愉快的果味茶</li>
    </ul>

    <p>该列表的 list-style-position 的值是 "outside"：</p>
    <ul class="outside">
        <li>Earl Grey Tea - 一种黑颜色的茶</li>
        <li>Jasmine Tea - 一种神奇的“全功能”茶</li>
        <li>Honeybush Tea - 一种令人愉快的果味茶</li>
    </ul>
</body>

</html>